<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.org/ui"
                xmlns:ui="http://java.sun.com/jsf/facelets">

    <p:panel styleClass="imgHeader generalInputFormPanel newUserPanel" rendered="#{administrationView.activePanel == 'NEW_USER'}">
        <f:facet name="header">
            <h:graphicImage library="images" name="user.png" />
            <h:outputText styleClass="title" value="#{msg['adminPage.userManagement.newUser.title']}" />
        </f:facet>

        <h:panelGrid id="editUserPanel" columns="2" styleClass="inputDataFields" columnClasses="label,value">
            <h:outputText value="#{msg['adminPage.userManagement.users.username']}" />
            <h:panelGroup>
                <p:inputText id="id-username" value="#{userManager.newOrModifiedUserBean.username}" disabled="#{userManager.newOrModifiedUserBean.registrationDate != null}"
                             maxlength="30" required="true" requiredMessage="#{msg['userManagement.inputFields.validationMessages.required']}"
                             validator="#{userManager.validateUsername}" />
                <p:message for="id-username" />
            </h:panelGroup>
            <h:outputText value="#{msg['adminPage.userManagement.users.password']}" />
            <h:panelGroup rendered="#{userManager.newOrModifiedUserBean.registrationDate == null or userManager.changePassword}">
                <p:password id="id-password" value="#{userManager.newOrModifiedUserBean.password}" maxlength="16"
                            required="true" requiredMessage="#{msg['userManagement.inputFields.validationMessages.required']}"
                            validatorMessage="#{msg['userManagement.inputFields.validationMessages.password.format']}">
                    <f:validateLength minimum="8" />
                    <f:validateRegex pattern="[a-zA-Z_0-9-.]+" />
                </p:password>
                <p:commandButton value="#{msg['Common.cancel']}" icon="cancel" immediate="true" update="editUserPanel" rendered="#{userManager.changePassword}" style="margin-left: 5px">
                    <f:setPropertyActionListener value="false" target="#{userManager.changePassword}" />
                </p:commandButton>
                <p:message for="id-password" />
            </h:panelGroup>
            <h:outputText value="#{msg['adminPage.userManagement.users.passwordConfirmation']}" rendered="#{userManager.newOrModifiedUserBean.registrationDate == null or userManager.changePassword}" />
            <h:panelGroup rendered="#{userManager.newOrModifiedUserBean.registrationDate == null or userManager.changePassword}">
                <p:password id="id-conf-password" maxlength="16" required="true" requiredMessage="#{msg['userManagement.inputFields.validationMessages.required']}"
                            validator="#{registrationManager.validatePassword}" />
                <p:message for="id-conf-password" />
            </h:panelGroup>
            <h:panelGroup rendered="#{userManager.newOrModifiedUserBean.registrationDate != null and !userManager.changePassword}">
                <p:commandButton value="#{msg['Common.change']}" icon="edit" immediate="true" update="editUserPanel">
                    <f:setPropertyActionListener value="true" target="#{userManager.changePassword}" />
                </p:commandButton>
                <p:commandButton value="#{msg['Common.reset']}" icon="reset" onclick="confirmPasswordResetDialog.show();return false;" />
            </h:panelGroup>
            <h:outputText value="#{msg['adminPage.userManagement.users.firstName']}" />
            <h:panelGroup>
                <p:inputText id="id-firstname" maxlength="45" value="#{userManager.newOrModifiedUserBean.firstname}"
                             required="true" requiredMessage="#{msg['userManagement.inputFields.validationMessages.required']}"
                             validatorMessage="#{msg['userManagement.inputFields.validationMessages.name.length']}" >
                    <f:validateLength minimum="3" />
                </p:inputText>
                <p:message for="id-firstname" />
            </h:panelGroup>
            <h:outputText value="#{msg['adminPage.userManagement.users.lastName']}" />
            <h:panelGroup>
                <p:inputText id="id-lastname" maxlength="45" value="#{userManager.newOrModifiedUserBean.lastname}"
                             required="true" requiredMessage="#{msg['userManagement.inputFields.validationMessages.required']}"
                             validatorMessage="#{msg['userManagement.inputFields.validationMessages.name.length']}" >
                    <f:validateLength minimum="3" />
                </p:inputText>
                <p:message for="id-lastname" />
            </h:panelGroup>
            <h:outputText value="#{msg['adminPage.userManagement.users.sex']}" />
            <p:selectOneMenu styleClass="ui-selectonemenu-small" panelStyleClass="optionsPanel-small" value="#{userManager.newOrModifiedUserBean.sex}" >
                <f:selectItem itemLabel="#{msg['adminPage.userManagement.users.sex.male']}" itemValue="#{true}" />
                <f:selectItem itemLabel="#{msg['adminPage.userManagement.users.sex.female']}" itemValue="#{false}" />
            </p:selectOneMenu>
            <h:outputText value="#{msg['adminPage.userManagement.users.age']}" />
            <h:panelGroup>
                <p:inputText id="id-age" maxlength="3" style="width: 24px" value="#{userManager.newOrModifiedUserBean.age}"
                             required="true" requiredMessage="#{msg['userManagement.inputFields.validationMessages.required']}"
                             validatorMessage="#{msg['userManagement.inputFields.validationMessages.age']}"
                             converterMessage="#{msg['userManagement.inputFields.validationMessages.age']}">
                    <f:convertNumber integerOnly="true" />
                    <f:validateLongRange minimum="18" maximum="99" />
                </p:inputText>
                <p:message for="id-age" />
            </h:panelGroup>
            <h:outputText value="#{msg['adminPage.userManagement.users.email']}" />
            <h:panelGroup>
                <p:inputText id="id-email" maxlength="200" value="#{userManager.newOrModifiedUserBean.email}"
                             required="true" requiredMessage="#{msg['userManagement.inputFields.validationMessages.required']}"
                             validatorMessage="#{msg['userManagement.inputFields.validationMessages.email']}">
                    <f:validateRegex pattern=".+@.+\.[a-z]+" />
                </p:inputText>
                <p:message for="id-email" />
                <p:selectBooleanCheckbox value="#{userManager.sendConfirmationMail}" itemLabel="#{msg['adminPage.userManagement.users.email.confirmationCheckbox']}"
                                         rendered="#{userManager.newOrModifiedUserBean.registrationDate == null}" styleClass="sendMailCheckbox" />
            </h:panelGroup>
            <h:outputText value="#{msg['adminPage.userManagement.users.group']}" />
            <p:selectOneMenu value="#{userManager.selectedGroupId}" style="width: 208px" >
                <f:selectItems value="#{userManager.groups}" var="group" itemLabel="#{group.groupName}" itemValue="#{group.groupId}" />
            </p:selectOneMenu>
            <h:outputText value="#{msg['adminPage.userManagement.users.state']}" />
            <h:panelGroup>
                <p:selectOneMenu styleClass="ui-selectonemenu-small" panelStyleClass="optionsPanel-small" value="#{userManager.newOrModifiedUserBean.state}" onchange="$('.changeStateAction').click();">
                    <f:selectItem itemLabel="#{msg['adminPage.userManagement.users.state.active']}" itemValue="true" />
                    <f:selectItem itemLabel="#{msg['adminPage.userManagement.users.state.inactive']}" itemValue="false" />
                </p:selectOneMenu>
                <p:commandButton styleClass="changeStateAction" immediate="true" update="@form" style="display: none">
                    <f:setPropertyActionListener value="#{!userManager.stateModified}" target="#{userManager.stateModified}" />
                </p:commandButton>
                <p:selectBooleanCheckbox id="sendNotification" value="#{userManager.sendConfirmationMailAboutActivation}" itemLabel="#{msg['adminPage.userManagement.users.state.activationNotification']}"
                                         rendered="#{userManager.newOrModifiedUserBean.registrationDate != null and userManager.stateModified}" styleClass="sendMailCheckbox" />
            </h:panelGroup>
        </h:panelGrid>

        <p:commandButton value="#{msg['Common.save']}" icon="save" action="#{userManager.save}" update="@form" rendered="#{userManager.newOrModifiedUserBean.registrationDate == null}" />
        <p:commandButton value="#{msg['Common.update']}" icon="save" action="#{userManager.update}" update="@form" rendered="#{userManager.newOrModifiedUserBean.registrationDate != null}" />
        <p:commandButton value="#{msg['Common.cancel']}" action="#{userManager.cancel}" update="@form" icon="cancel" process="@this" >
            <f:actionListener type="org.omnifaces.eventlistener.ResetInputAjaxActionListener"/>
        </p:commandButton>
    </p:panel>
    <p:confirmDialog header="#{msg['adminPage.userManagement.confirmPasswordReset.title']}" widgetVar="confirmPasswordResetDialog"
                     severity="info" message="#{msg['adminPage.userManagement.confirmPasswordReset.message']}"
                     styleClass="confirmationDialog questionDialog resetDialogIcon" closable="false">
        <h:form>
            <p:commandButton value="#{msg['Common.yes']}" action="#{userManager.resetPassword}" oncomplete="handlePasswordChangeResult(xhr, status, args);return false;" />
            <p:commandButton value="#{msg['Common.no']}" onclick="confirmPasswordResetDialog.hide();return false;" />
        </h:form>
    </p:confirmDialog>
    <p:confirmDialog header="#{msg['adminPage.userManagement.passwordResetSuccess.title']}" widgetVar="passwordChangeSuccessDialog"
                     severity="info" message="#{msg['adminPage.userManagement.passwordResetSuccess.message']}"
                     styleClass="confirmationDialog infoDialogIcon" closable="false">
        <h:form>
            <p:commandButton value="#{msg['Common.ok']}" onclick="passwordChangeSuccessDialog.hide();return false;" />
        </h:form>
    </p:confirmDialog>
    <script type="text/javascript">
        function handlePasswordChangeResult(xhr, status, args) {
            confirmPasswordResetDialog.hide();
            if(args.passwordChanged){
                passwordChangeSuccessDialog.show();
            }
        }
    </script>
</ui:composition>